<template>
  <div class="page">
    <h1>echarts line part</h1>
    <div class="panel">
      <div class="row">
        <div class="col-6">
          <div class="part2">
            <div id="plot1" class="plot"></div>
          </div>
        </div>
        <div class="col-6">
          <div class="part2">
            <div id="plot2" class="plot"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="part2">
            <div id="plot3" class="plot"></div>
          </div>
        </div>
        <div class="col-6">
          <div class="part2">
            <div id="plot4" class="plot"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      x: null,
    };
  },
  methods: {
    plot_line1() {
      fetch("http://127.0.0.1:8000/echarts_line/fristsimple_line")
        .then((Response) => {
          //   console.log(Response);
          return Response.json();
        })
        .then((data) => {
          //   console.log(data);
          let x_data = data.map(function (x) {
            return x["x_data"];
          });
          let y_data = data.map(function (x) {
            return x["y_data"];
          });
          console.log(x_data);
          console.log(y_data);
          let plot1 = echarts.init(document.getElementById("plot1"));
          plot1.setOption({
            title: { text: "第一个图" },
            tooltip: {},
            xAxis: {
              type: "category",
              data: x_data,
            },
            yAxis: {
              type: "value",
            },
            series: [{ data: y_data, type: "line" }],
          });
        });
    },
    plot_line2() {
      fetch("http://127.0.0.1:8000/echarts_line/fristsimple_line")
        .then((Response) => {
          //   console.log(Response);
          return Response.json();
        })
        .then((data) => {
          //   console.log(data);
          let x_data = data.map(function (x) {
            return x["x_data"];
          });
          let y_data = data.map(function (x) {
            return x["y_data"];
          });
          console.log(x_data);
          console.log(y_data);
          let plot1 = echarts.init(document.getElementById("plot2"));
          plot1.setOption({
            title: { text: "第2个图" },
            tooltip: {},
            xAxis: {
              type: "category",
              data: x_data,
            },
            yAxis: {
              type: "value",
            },
            series: [{ data: y_data, type: "line", smooth: true }],
          });
        });
    },
    plot_line3() {
      fetch("http://127.0.0.1:8000/echarts_line/fristsimple_line")
        .then((Response) => {
          //   console.log(Response);
          return Response.json();
        })
        .then((data) => {
          //   console.log(data);
          let x_data = data.map(function (x) {
            return x["x_data"];
          });
          let y_data = data.map(function (x) {
            return x["y_data"];
          });
          console.log(x_data);
          console.log(y_data);
          let plot1 = echarts.init(document.getElementById("plot3"));
          plot1.setOption({
            title: { text: "第3个图" },
            tooltip: {},
            xAxis: {
              type: "category",
              data: x_data,
              boundaryGap: false,
            },
            yAxis: {
              type: "value",
            },
            series: [
              { data: y_data, type: "line", smooth: true, areaStyle: {} },
            ],
          });
        });
    },
  },
  mounted() {
    this.plot_line1();
    this.plot_line2();
    this.plot_line3();
  },
};
</script>


<style >
.part2 {
  padding: 20px;
  margin: 10px;
  border-color: green;
  border-width: medium;
  border-style: solid;
  border-radius: 20px;
}

.plot {
  height: 200px;
}

.page {
  overflow: hidden;
}
</style>